<template>
  <div class="page-container">
    <div class="common-content-wrap">
      <TrTable
        ref="trTable"
        v-model="searchParams"
        :btnList="btnList"
        :searchShowList="searchShowList"
        :tableData="tableData"
        :tableColumn="tableColumn"
        :total="totalNum"
        requestName="getList"
        @add="operateHandle($event, 'add')"
        @delete="operateHandle($event, 'delete')"
        @rowDelete="operateHandle($event, 'rowDelete')"
        @rowEdit="operateHandle($event, 'rowEdit')"
      />
    </div>
    <TrFormPopup
      v-model="isShowEdit"
      :title="checkTitle"
      :width="480"
      :valueObj.sync="formObj"
      :formData="formData"
      :list="popupList"
      @close="isShowEdit = false"
      @confrim="confrimHandle"
    />
  </div>
</template>

<script>
import { getList, add, edit, remove } from "@/api/configuration/notice.js";
import { getColor } from "@/utils/billColor";
import TrTable from "@/components/Tr-table/Tr-table.vue";
import TrFormPopup from "@/components/Tr-form/Tr-form-popup.vue";
import moment from "moment";
export default {
  name: "NoticeBox",
  components: {
    TrTable,
    TrFormPopup,
  },
  data: () => ({
    isShowEdit: false,
    formObj: {},
    formData: {},
    btnList: [
      {
        label: "新增",
        option: "add",
        color: "blue",
      },
      // {
      //   label: "删除",
      //   option: "delete",
      //   color: "white",
      // },
    ],
    totalNum: 0,
    tableData: [],
    searchParams: {
      pageNo: 1,
      pageSize: 10,
    },
    searchShowList: [
      {
        id: "title",
        label: "标题",
        type: "input",
        value: "",
        width: 25,
      },
      {
        startStr: "startTime",
        endStr: "endTime",
        id: "createTime",
        type: "daterange",
        label: "发布时间",
        width: 70,
        value: [],
        radio: -1,
        timePeriod: true,
        format: "yyyy-MM-dd",
      },
    ],
    tableColumn: [
      {
        type: "text",
        label: "标题",
        value: "title",
      },
      {
        type: "text",
        label: "内容",
        value: "content",
      },
      {
        type: "text",
        label: "发布时间",
        value: "createTimeName",
      },
      {
        type: "text",
        label: "状态",
        value: "statusName",
      },
      {
        type: "option",
        label: "操作",
        width: 100,
        showBtnList: [
          {
            label: "编辑",
            option: "rowEdit",
          },
          {
            label: "删除",
            option: "rowDelete",
          },
        ],
      },
    ],
    currentHandle: "",
    popupList: [
      {
        label: "标题",
        type: "input",
        width: 100,
        value: "",
        id: "title",
      },
      // {
      //   label: "状态",
      //   type: "radio",
      //   width: 50,
      //   value: 0,
      //   id: "status",
      //   list: [
      //     {
      //       label: "正常",
      //       value: 0,
      //     },
      //     {
      //       label: "停用",
      //       value: 1,
      //     },
      //   ],
      // },
      {
        label: "内容",
        type: "textarea",
        width: 100,
        value: "",
        id: "content",
      },
    ],
  }),
  computed: {
    checkTitle() {
      return this.currentHandle == "add" ? "新增" : "编辑";
    },
    ids() {
      return this.$refs.trTable.selectionList.map((item) => item.id);
    },
  },
  methods: {
    async operateHandle(val, type) {
      this.currentHandle = type;
      this.formData = type == "rowEdit" ? val : {};
      // const roColumn = this.$findByProperty(this.popupList, "id", "roleCode");
      // roColumn.disabled = type == "rowEdit";
      switch (type) {
        case "delete":
          this.remove(this.ids);
          return;
        // case "roleSet": {
        //   let res = await grantTree();
        //   let roRes = await getRole(this.ids.join(","));
        //   const meColumn = this.$findByProperty(
        //     this.powerList,
        //     "id",
        //     "menuIds"
        //   );
        //   meColumn.list = res.data.data.menu;
        //   meColumn.value = roRes.data.data.menu;
        //   console.log(meColumn.value, "meColumn.value");
        //   this.isShowRolePopup = true;
        //   return;
        // }
        case "rowDelete":
          this.removeHandle(val.id);
          return;
      }
      this.isShowEdit = true;
    },
    removeHandle(id) {
      this.$textShow({
        title: this.$t("tip.label"),
        content: [this.$t("tip.delete")],
      })
        .then(async () => {
          let res = await remove(id);
          this.$message.success(this.$t("msg.success"));
          this.$refs.trTable.clearSelect();
          this.getList();
        })
        .catch(() => {});
    },
    async getList() {
      const { data: res } = await getList(this.searchParams);
      console.log(res, ">>>>>>>>>..");
      this.$validateData(res);
      this.tableData = res.list;
      this.tableData.forEach((item) => {
        item["statusName"] = this.getStatusName(item.status);
        item["statusNameColor"] = getColor("QT", item.status);
        item["createTimeName"] = moment(item.createTime).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      });
      this.totalNum = res.total;
    },
    getStatusName(status) {
      return status === 0 ? "正常" : status === 1 ? "停用" : "-";
    },
    confrimHandle() {
      if (this.currentHandle == "rowEdit") {
        this.formObj.id = this.formData.id;
        this.editHandle(this.formObj);
        return;
      }
      this.addHandle(this.formObj);
    },
    addHandle(row) {
      add(row).then((res) => {
        this.isShowEdit = false;
        this.formObj = {};
        this.getList();
        this.$message.success(this.$t("msg.success"));
      });
    },
    editHandle(row) {
      edit(row).then((res) => {
        this.isShowEdit = false;
        this.formObj = {};
        this.getList();
        this.$message.success(this.$t("msg.success"));
      });
    },
  },
};
</script>
